<!--初级连接员必学.中级连.高级-->
<script setup lang="ts">

// import {reactive} from "vue/dist/vue";
import unSelectedImage from '../../assets/step_learn_rocket_navigation.png';
import selectedImage from '../../assets/step_learn_navigationed.png';

const props = defineProps(['listData'])
// 将传入的 props.buttons 转换为一个响应式 ref
// const listData = reactive([...props.listData]);

function showImage(state:boolean){
  if(state){
    return selectedImage;
  }else{
    return unSelectedImage;
  }
}

</script>

<template>
  <div class="mainRootStyle">
  <div v-for="(element,index) in props.listData" class="LearnStyle" :key="index">
    <div class="mainStyle" :class="{'unMainStyle':element.index>=element.current}">
      {{element.title}}
    </div>
    <img v-if="!element.lastIndex" :src='showImage(element.index>=element.current)' style="margin-left: 20px;margin-right: 20px" width="40px" height="40px">
  </div>
  </div>
</template>

<style scoped>

.mainRootStyle{
  display: flex;
  flex-direction: row;
  width: 100%;
}

.LearnStyle{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.mainStyle{
  height: 48px;
  background: rgba(60,141,249,0.1);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #3C8DF9;
  align-items: center;
  display: flex;
  font-weight: bold;
  font-size: 24px;
  color: #3C8DF9;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding: 0 20px;
}


.unMainStyle{
  background: rgba(255,255,255,0.5);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid rgba(0,0,0,0.4);
  color: rgba(0,0,0,0.4);
}

</style>